<template>
  <view class="uni-padding-wrap uni-common-mt">
    <view class="uni-form-item uni-column">
      <view class="title"><text class="uni-form-item__title">用户名</text></view>
      <view class="uni-input-wrapper">
        <input class="uni-input" v-model.trim="username" focus placeholder="此处输入用户名" />
      </view>
    </view>

    <view class="uni-form-item uni-column">
      <view class="title"><text class="uni-form-item__title">密码</text></view>
      <view class="uni-input-wrapper">
        <input class="uni-input" v-model.trim="password" placeholder="请输入密码" :password="showPassword" />
        <text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword">&#xe568;</text>
      </view>
    </view>
    <view class="text-center margin">
      <button type="default" @click.stop="fillInDemo()">点此填入演示用户guest</button>
    </view>

    <view class="uni-form-item uni-column">
      <view class="uni-btn-v">
        <button type="primary" :disabled="false" @click.stop="execLogin()">登录</button>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  // import pageFoot from '@/components/page-head/page-foot.vue';
  import {
    login
  } from "@/common/api/user.js";
  import {
    useUserStore
  } from '@/store/index'
  import {
    onShow,
    onLoad,
    onNavigationBarButtonTap
  } from '@dcloudio/uni-app'

  const userStore = useUserStore()

  let username = ref('')
  let password = ref('')
  let logining = ref(false)
  let showPassword = ref(true)

  onShow(() => {
    console.log('onShow......')
  })

  // function onKeyInput(e) {
  // 	console.log(e);
  // }

  function changePassword() {
    showPassword.value = !showPassword.value
  }

  function execLogin() {
    const params = {
      "username": username.value,
      "password": password.value,
    };

    // console.log(params)

    login(
      params,
      (jsonResult) => {
        console.log(jsonResult)
        // console.log(jsonResult.errcode)
        if (jsonResult.errcode == 0) {
          console.log("login success")
          userStore.login(jsonResult)
          uni.showToast({
            title: 'Login Success!',
            duration: 1000
          })
          // uni.navigateBack()
          uni.switchTab({
            url: '/pages/home/home'
          })
        } else {
          uni.showToast({
            title: 'Login Failed',
            icon: 'none',
            duration: 1000
          })
        }
      })
  }

  onNavigationBarButtonTap((e) => {
    console.log(e)
    console.log(e.key)
    if (e.key === 'home') {
      console.log('to home')
      console.log(getCurrentPages().length); // 打印当前页面栈深度
      console.log(uni.getAppBaseInfo())
      try {
        uni.reLaunch({
          url: '/pages/home/home'
        })
      } catch (e) {
        console.log(e)
      }

    }
  });

  function fillInDemo() {
    username.value = 'guest2025'
    password.value = 'guest.12345678'
  }
</script>

<style>
  .is-hover {
    color: rgba(255, 255, 255, 0.6);
    background-color: #179b16;
    border-color: #179b16;
  }

  .nvue-page-root {
    background-color: #F8F8F8;
    padding-bottom: 20px;
  }

  .page-title {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 35rpx;
  }

  .page-title__wrapper {
    padding: 0px 20px;
    border-bottom-color: #D8D8D8;
    border-bottom-width: 1px;
  }

  .page-title__text {
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    color: #BEBEBE;
  }

  .title {
    padding: 5px 5px;
  }

  .uni-form-item__title {
    font-size: 16px;
    line-height: 24px;
    color: $uni-main-color;
  }

  .uni-input-wrapper {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    padding: 5px 5px;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: #FFFFFF;
  }

  .uni-input {
    height: 28px;
    line-height: 28px;
    font-size: 15px;
    padding: 0px;
    flex: 1;
    background-color: #FFFFFF;
  }

  .uni-icon {
    font-family: uniicons;
    font-size: 24px;
    font-weight: normal;
    font-style: normal;
    width: 24px;
    height: 24px;
    line-height: 24px;
    color: #999999;
  }

  .uni-eye-active {
    color: #007AFF;
  }
</style>